<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合同定制->预览</title>
    <link href="css/style.css" rel="stylesheet">
    <style>
        .left {
            width: 47%;
            float: left;
            margin: 10px;
        }

        .right {
            width: 47%;
            float: left;
            margin: 10px;
            margin-top: 50px;
            padding: 10px;
            border: solid 1px rgb(219, 219, 219);
            height: 100px;
            margin-bottom: 70px;
            position: relative;
        }

        .right_bo {
            width: 47%;
            height: 300px;
            float: left;
            margin: 10px;
            padding: 10px;
            border: solid 1px rgb(219, 219, 219);
            text-align: center;
            position: relative;
        }

        .img {
            margin: 10px;
            float: left;
            max-width: 50%;
            max-height: 80px;
        }

        .img_bo {
            margin: 15px;
            position: absolute;
            max-width: 50%;
            max-height: 150px;
            left: 70px;
            bottom: 0px;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">

        $(function() {
            init();
        });

        function init() {
            var text = $("#prevBlock").text(); //先取出未转换格式前端数据
            var des = text.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');  //转换格式
            $("#prevBlock").empty();
            $("#prevBlock").append(des);
        }

    </script>
</head>
<body>
<div class="left">
    <div style="text-align: center;">
        <h3>预览您的合同全文</h3>
    </div>
    <div style="overflow-y:scroll;height: 500px;border: solid 1px rgb(219, 219, 219);">
        <span th:text="${contract.name}"></span><br/>
        <th:block th:each="contractItem:${contract.contractSteps[0].contractItems}">
            <span id="prevBlock" th:text="${contractItem.attributeValue}"></span><br/>
        </th:block>
    </div>
</div>


<div class="right">
    <div><img src="img/2.jpg" class="img"/></div>
    <p>需要专业团队为您审核？请点击下面按钮，进入合同审核服务</p>
    <div style="position: absolute;right: 30px;bottom: 0px;">
        <form th:action="@{~/contract/auditServiceList}" method="POST">
            <input type="submit" value="合同审核" class="btn ant-btn ant-btn-red"/>
        </form>
    </div>
</div>

<div class="right_bo">
    <h3>合同保存、修改与下载</h3></br>
    <p>请注意：合同定制中的条款为专业定制，删减时请注意</p>
    <div><img src="img/2.jpg" class="img_bo"/></div>
    <div style="position: absolute;right: 30px;bottom: 0px;">
        <form th:action="@{~/contract/customServiceEdit}" method="POST">
            <input name="name" type="hidden" th:value="${contract.name}"/>
            <th:block th:each="contractItem:${contract.contractSteps[0].contractItems}">
                <input type="hidden"
                       th:name="'contractSteps[0].contractItems['+${#strings.toString(contractItemStat.index)}+'].attributeValue'"
                       th:value="${contractItem.attributeValue}">
            </th:block>
            <input type="submit" value="合同修改" class="btn ant-btn ant-btn-red"/>
        </form>
        </br>
        <form th:action="@{~/contract/customServiceDownload}" method="POST">
            <input name="name" type="hidden" th:value="${contract.name}"/>
            <th:block th:each="contractItem:${contract.contractSteps[0].contractItems}">
                <input type="hidden"
                       th:name="'contractSteps[0].contractItems['+${#strings.toString(contractItemStat.index)}+'].attributeValue'"
                       th:value="${contractItem.attributeValue}">
            </th:block>
            <input type="submit" value="合同下载" class="btn ant-btn ant-btn-red"/>
        </form>
    </div>
</div>

</body>
</html>